<template>
	<view style="height:100%" class="">
		<view class="invite-box">
			<view class="invite-box-top">

			</view>
			<view class="invite-box-bottom">
				<view class="invite-body">
					<view class="invite-body-box">
						<view class="body-title">
							我的邀请码
						</view>
						<view class="body-content">
							{{ invitationCode }}
						</view>
						<view class="body-copy" @click="copyCode(invitationCode)">
							<text>复制</text>
						</view>
					</view>
					<view class="code-box">
						<view class="body-code">
							<!-- <vue-qr text="Hello world!" :callback="test" qid="testid" :size="100"></vue-qr> -->
							<canvas canvas-id="qrcode" style="width: 300rpx;margin: 0 auto;"/>
						</view>
						<view class="body-foot">
							我的专属二维码
						</view>
					</view>
					<view class="invite-foot" @click="savePicture">
						<text>邀请好友</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <uni-popup ref="sharePopup" background-color="#fff">
			<view class="popup-content">
				<view class="img-text download-img" @click="savePicture">
					<image mode="heightFix" style="height: 50px; margin-bottom: 8px;" src="@/static/download.png" alt=""/>
					<text class="download-img-title">保存图片</text>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode/index.js'
	import * as UserApi from '@/api/user';
	import {
		copyText
	} from '@/common/copy/index.js';
	import {
		nextTick
	} from "vue";
	export default {
		data() {
			return {
				captureImgUrl: '',
				invitationCode: ''
			}
		},
		onShow: function() {
			this.getPageData();
		},
		methods: {
			qrFun(text) {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 100,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			// 获取页面数据
			getPageData() {
				const app = this
				app.isLoading = true
				Promise.all(app.getUserInfo())
					.then(() => app.isLoading = false)
			},
			// 获取会员信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					UserApi.info()
						.then(result => {
							app.invitationCode = result.data.userInfo.invitation_code
							this.qrFun(`https://lx.mallgo.net.cn/share_download/#/shareDownload/index?code=${this.invitationCode}`);
							resolve(app.userInfo)
						})
				})
			},
			// 点击复制功能
			copyCode(text) {
				copyText(text);
				uni.showToast({
					title: '复制成功!'
				})
			},
			// 点击出现分享弹窗
			shareOptions() {
				this.$refs.sharePopup.open('bottom');
			},
			// 分享到朋友圈
			shareCircle() {
				this.$refs.sharePopup.close();
				setTimeout(() => {
					const that = this;
					const pages = getCurrentPages();
					// 获取到当前页面
					const page = pages[pages.length - 1];
					const ws = page.$getAppWebview();
					/* 获取屏幕信息 */
					// let ws = this.$mp.page.$getAppWebview();
					let bitmap = new plus.nativeObj.Bitmap('test');
					ws.draw(bitmap, function() {
						let fileName = '_doc/' + new Date().getTime() + '.png'
						bitmap.save(fileName, {}, function(i) {
							uni.share({
								provider: "weixin",
								scene: "WXSceneTimeline",
								type: 2,
								imageUrl: i.target,
								success: function(res) {
									bitmap.clear(); //销毁Bitmap图片
								},
								fail: function(err) {}
							});
						}, function(e) {});
					}, function(e) {}, {
						clip: {
							top: '88px',
							left: '0',
							height: '100%',
							width: '100%'
						}
					});
				}, 500)
			},
			// 分享到微信好友
			shareWx() {
				this.$refs.sharePopup.close();
				setTimeout(() => {
					const that = this;
					const pages = getCurrentPages();
					// 获取到当前页面
					const page = pages[pages.length - 1];
					const ws = page.$getAppWebview();
					/* 获取屏幕信息 */
					let bitmap = new plus.nativeObj.Bitmap('test');
					ws.draw(bitmap, function() {
						let fileName = '_doc/' + new Date().getTime() + '.png'
						bitmap.save(fileName, {}, function(i) {
							// 将图片分享给好友
							uni.share({
								provider: "weixin",
								scene: "WXSceneSession",
								type: 2,
								imageUrl: i.target,
								success: function(res) {
									bitmap.clear(); //销毁Bitmap图片
								},
								fail: function(err) {}
							});
						}, function(e) {});
					}, function(e) {}, {
						clip: {
							top: '88px',
							left: '0',
							height: '100%',
							width: '100%'
						}
					});
				}, 500)
			},
			// 将当前页面保存为图片
			savePicture() {
				setTimeout(() => {
					const that = this;
					const pages = getCurrentPages();
					// 获取到当前页面
					const page = pages[pages.length - 1];
					const ws = page.$getAppWebview();
					/* 获取屏幕信息 */
					let bitmap = new plus.nativeObj.Bitmap('test');
					ws.draw(bitmap, function() {
						let fileName = '_doc/' + new Date().getTime() + '.png'
						bitmap.save(fileName, {}, function(i) {
							uni.saveImageToPhotosAlbum({
								filePath: i.target,
								success: function() {
									uni.showToast({
										title: '保存图片成功',
										mask: false,
										duration: 1500
									});
								}
							});
						}, function(e) {
							console.log('保存图片失败：' + JSON.stringify(e));
						});
					}, function(e) {
						console.log('截屏绘制图片失败：' + JSON.stringify(e));
					}, {
						clip: {
							top: '88px',
							left: '0',
							height: '100%',
							width: '100%'
						}
					});
				}, 1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.invite-box {
		height: 100%;
		background: url('@/static/invite-bg.png') no-repeat;
		background-size: 100% 100%;

		.invite-box-top {
			height: 50%;
		}

		.invite-box-bottom {
			height: 50%;
			display: flex;
			flex-direction: column;

			// align-items: center;
			// justify-content: center;
			.invite-body {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				margin-top: -2%;
				padding: 0 12px;

				.invite-body-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: -18%;
					color: #f21a1a;

					.body-title {}

					.body-content {
						font-size: 40rpx;
					}

					.body-copy {
						padding: 1px 20px;
						border: 1px solid #F26344;
						border-radius: 3px;
						color: #F26344;
					}
				}

				.code-box {
					margin-top: -5%;
					text-align: center;

					.body-code {
						width: 100px;
						height: 100px;
						background-color: #fff;
						margin-bottom: 12px;
					}

					.body-foot {
						font-size: 12px;
						color: #fff;
					}
				}
			}

			.invite-foot {
				text-align: center;
				width: 100%;
				border-radius: 32px;
				font-size: 18px;
				padding: 15px 30px;
				border: 1px solid #fff;
				color: #fff;
				background: linear-gradient(to right, #f9211c, #ff6335);
			}
		}
	}

	.popup-content {
		display: flex;
		justify-content: space-around;
		padding: 18px 0 50px 0;

		.img-text {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
</style>
